﻿

<div id="pasos" class="row">
    <div class="col-xs-8 col-sm-4 col-md-4 activo">
        <h4>
            1</h4>
        <strong>Selección de Servicio</strong>
    </div>
    <div class="col-xs-2 col-sm-4 col-md-4 inactivo">
        <h4>
            2</h4>
        <strong class="hidden-xs">Carga de pasajeos</strong>
    </div>
    <div class="col-xs-2 col-sm-4 col-md-4 inactivo">
        <h4>
            3</h4>
        <strong class="hidden-xs">Confirmacion y pago</strong>
    </div>
</div>



@*  <------ divPanelBuscador ----->  *@

<div class="row" style="margin-top: 40px">
    <div class="panel panel-default">
        <div id="panelBuscador-pasajes-barra-top" class="panel-heading">
            <label class="radio-inline">
                <input type="radio" name="tipoPasajeGroup" value="1" data-bind="checked: pasajeModel.IsOneWay"
                    id="rdoSoloIda">
                IDA
            </label>
            <label class="radio-inline">
                <input type="radio" name="tipoPasajeGroup" value="0" id="rdoIdaYvuelta" data-bind="checked: pasajeModel.IsOneWay"
                    checked="checked">
                IDA Y VUELTA
            </label>
            <button type="button" class="btn  btn-xs btn-danger  pull-right" data-toggle="collapse"
                data-target="#pnlbuscar-pasajesDisponibles-body">
                <i class="fa fa-list-ul"></i>
            </button>
        </div>
        <div id="pnlbuscar-pasajesDisponibles-body" class="panel-body collapse">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-2 pnlbuscar-pasajesDisponibles-body-space">
                    <label class="sr-only" for="txtPasajesOrigenTerminal">
                        Origen</label>
                    <input id="txtPasajesOOrigenTerminal" type="text" data-bind="value: pasajeModel.origen, typeAheadValue: pasajeModel.origen"
                        placeholder="Origen" class="form-control" autocomplete="off" />
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 pnlbuscar-pasajesDisponibles-body-space">
                    <label class="sr-only" for="txtPasajesODestinoTerminal">
                        Destino</label>
                    <input id="txtPasajesODestinoTerminal" type="text" data-bind="value: pasajeModel.destino, typeAheadValue: pasajeModel.destino"
                        placeholder="Destino" class="form-control" autocomplete="off" />
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 pnlbuscar-pasajesDisponibles-body-space">
                    <label class="sr-only" for="TxtPasajesFechaSalida">
                        FECHA IDA</label>
                    <div class="input-append date" id="dpickerPasajesSalida" data-date="12/10/2013" data-date-format="dd/mm/yyyy">
                        <div class="input-group">
                            <input id="TxtPasajesFechaSalida" size="16" type="text" value="12/10/2013" data-bind="value: pasajeModel.fechaIda"
                                class="form-control">
                            <span class="add-on input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 pnlbuscar-pasajesDisponibles-body-space">
                    <label class="sr-only" for="txtPasajesFechaVuelta">
                        FECHA VUELTA</label>
                    <div class="input-append date " id="dpickerPasajesVuelta" data-date="12/10/2013"
                        data-date-format="dd/mm/yyyy">
                        <div class="input-group">
                            <input id="txtPasajesFechaVuelta" size="16" type="text" value="12/10/2013" data-bind="value: pasajeModel.fechaVuelta"
                                class="form-control">
                            <span class="add-on input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-1 pnlbuscar-pasajesDisponibles-body-space">
                    <label class="sr-only" for="cmbPasajesCantidadPasajeros">
                        Pasajeros</label>
                    <select id="cmbPasajesCantidadPasajeros" class="form-control select-numero-pasajeros"
                        data-bind="value: pasajeModel.pasajeros">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-3 pnlbuscar-pasajesDisponibles-body-space">
                
                <!-- ko if: pasajeModel.IsOneWay() == 1 -->
                    <a id="btnBuscarPasaje" href="#" data-bind="click: buscarPasajes, 
                                        page-href: {path: '../pasajesDisponibles',                                      
                                        params: { origenId: pasajeModel.origenId, destinoId: pasajeModel.destinoId, 
                                                  pasajeros: pasajeModel.pasajeros, IsOneWay: pasajeModel.IsOneWay, 
                                                  fechaIda: pasajeModel.fechaIda, origen: pasajeModel.origen, 
                                                  destino: pasajeModel.destino  }}"
                    class="btn btn-default">Buscar</a>
                   <!-- /ko -->
                   
                   
                   <!-- ko if: pasajeModel.IsOneWay() == 0 -->
                   
                    <a id="btnBuscarPasaje" href="#" data-bind="click: buscarPasajes, 
                                        page-href: {path: '../pasajesDisponibles',                                      
                                        params: { origenId: pasajeModel.origenId, destinoId: pasajeModel.origenId, 
                                        pasajeros: pasajeModel.pasajeros, IsOneWay: pasajeModel.IsOneWay, 
                                        fechaIda: pasajeModel.fechaIda, fechaVuelta: pasajeModel.fechaVuelta, 
                                        origen: pasajeModel.origen, destino: pasajeModel.destino  }}"
                        class="btn btn-default">Buscar</a>
                   <!-- /ko -->



                </div>
            </div>
        </div>
    </div>
    
 </div>



 @*  <------ Div Ida y vuelta ----->  *@

<div class="row ">
    <div class="pasaje-barra">
        <div class="pasaje-barra-texto">
            <strong><span data-bind="text: App.Common.Aux.shortTerminalName(origen())"></span></strong>
            <br>
            <strong><span data-bind="text: destino"></span></strong>
        </div>
    </div>
    
</div>


@*  <--- IDA  --->  *@

        @*  <--- Div Servicios disponibles ida --->  *@
                                                                                                                                                                                                                                                                        <div class="row pasaje-barra-tramo-descrip-resultado spaceDivs">
    <div class="col-xs-3 col-sm-1 col-md-1 tipotramo tipotramo-ida limitar-ancho">
        <span class="glyphicon glyphicon-arrow-right white"></span>
    </div>
    <div class="col-xs-9 col-sm-11 col-md-11 detalle limitar-ancho">
        <div class="pull-left">
            <strong><span data-bind="text: App.Common.Aux.shortTerminalName(origen()) +' a '+ App.Common.Aux.shortTerminalName(destino())">
            </span></strong>
            <br />
            <p>
                10 registros</p>
        </div>
        <div class="pull-right">
            <div class="resultados-barra-fecha">
                <ul class=" list-inline text-center hidden-xs visible-lg visible-md visible-sm pull-right">
                    <li><a href="#">10/05/2013</a></li>
                    <li><a href="#">10/05/2013</a></li>
                    <li><a href="#">10/05/2013</a></li>
                </ul>
            </div>
            <div class="btn-group open visible-xs hidden-lg hidden-md hidden-sm">
                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-calendar fa-fw"></i>
                </button>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li><a href="#">10/05/2013</a></li>
                    <li><a href="#">10/05/2013</a></li>
                    <li><a href="#">10/05/2013</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

        @*  <--- Div Collapse Servicios disponibles ida --->  *@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="row">
    <div class="panel-group visible-xs hidden-md hidden-sm hidden-lg" id="accordionPasajeIda"
        data-bind="foreach: paIdaDisponibles">
        <div class="panel">
            <div class="panel-heading acor-phone-lista-pasajes-dispon-panel-header">
                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionPasajeIda"
                    data-bind="attr: { href:'#collapse' + $index() }"><strong><span data-bind="text: NombreProveedorTransportista">
                    </span></strong></a>
                <div class="pull-right">
                    <b class="precio"><span data-bind="text: '$ ' + Precio + ',00'"></span></b>
                    <!-- ko if: _.isEmpty($parent.idaSelected()) -->
                    <button class="btn btn-default btn-xs" data-bind="click: $parent.seleccionarPasaje.bind($data, true)">
                        <i class="fa fa-shopping-cart"></i>
                    </button>
                    <!-- /ko -->
                    <!-- ko ifnot: _.isEmpty($parent.idaSelected()) -->
                    <button class="btn btn-default btn-xs  btn-danger" data-bind="click: $parent.deseleccionarPasaje.bind($data, true)">
                        <i class="fa fa-times"></i>
                    </button>
                    <!-- /ko -->
                </div>
            </div>
            <div data-bind="attr: { id:'collapse' + $index() }" class="panel-collapse collapse"
                style="height: 0px;">
                <div class="panel-body row">
                    <div class="col-xs-12 col-sm-12 col-md-12 ">
                        <dl>
                            <dt>Fecha Salia : </dt>
                            <dd>
                                20/10/2013</dd>
                            <dt>Comodidad : </dt>
                            <dd>
                                <span data-bind="text: Calidad"></span>
                            </dd>
                            <dt>Fecha Llegada : </dt>
                            <dd>
                                21/10/2013</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="divTblPasajeIda" class="table-responsive hidden-xs visible-md visible-sm visible-lg">
        <table id="" class="table table-striped tblTablePasajes">
            <thead>
                <tr>
                    <th>
                        Empresa
                    </th>
                    <th>
                        Salida
                    </th>
                    <th>
                        Llegada
                    </th>
                    <th>
                        Comodidad
                    </th>
                    <th>
                        Precio
                    </th>
                    <th>
                        Comprar
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: paIdaDisponibles">
                <tr>
                    <td>
                        <span data-bind="text: NombreProveedorTransportista"></span>
                    </td>
                    <td>
                        <span data-bind="text: $parent.fechaIda"></span>
                    </td>
                    <td>
                        <span data-bind="text: $parent.fechaUrl"></span>
                    </td>
                    <td>
                        <span data-bind="text: Calidad"></span>
                    </td>
                    <td class="text-center" style="font-size: 15px; font-weight: bold;">
                        <span data-bind="text: $data.Precio"></span>
                    </td>
                    <td>
                        <!-- ko if: _.isEmpty($parent.idaSelected()) -->
                        <button class="btn btn-mini" data-bind="click: $parent.seleccionarPasaje.bind($data, true)">
                           <i class="fa fa-shopping-cart"></i>
                        </button>
                        <!-- /ko -->
                        <!-- ko ifnot: _.isEmpty($parent.idaSelected()) -->
                        <button class="btn btn-mini  btn-danger" data-bind="click: $parent.deseleccionarPasaje.bind($data, true)">
                            <i class="fa fa-times"></i>
                        </button>
                        <!-- /ko -->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>




  <!-- ko if: IsOneWay() == false -->

@*  <--- Vuelta  --->  *@

@*  <--- Div Servicios disponibles Vuelta --->  *@
<div class="row pasaje-barra-tramo-descrip-resultado spaceDivs">
   
    <div class="col-xs-3 col-sm-1 col-md-1 tipotramo tipotramo-vuelta limitar-ancho">
        <span class="glyphicon glyphicon-arrow-left white"></span>
    </div>
    <div class="col-xs-9 col-sm-11 col-md-11 detalle limitar-ancho">
        <div class="pull-left">
            <strong><span data-bind="text: App.Common.Aux.shortTerminalName(destino()) +' a '+ App.Common.Aux.shortTerminalName(origen())"></span></strong><br />
            <p>
                10 registros</p>
        </div>
        <div class="pull-right">

<div class="resultados-barra-fecha">

        <ul class=" list-inline text-center hidden-xs visible-lg visible-md visible-sm pull-right">
                    <li><a href="#">10/05/2013</a></li>
                    <li><a href="#">10/05/2013</a></li>
                    <li><a href="#">10/05/2013</a></li>
        </ul>
</div>

            <div class="btn-group open visible-xs hidden-lg hidden-md hidden-sm">
                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                   <i class="fa fa-calendar fa-fw"></i>
                </button>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li><a href="#">10/05/2013</a></li>
                    <li><a href="#">10/05/2013</a></li>
                    <li><a href="#">10/05/2013</a></li>
                </ul>
            </div>

        </div>
    </div>

</div>

@*  <--- Div Collapse Servicios disponibles ida --->  *@
<div class="row">

    <div class="panel-group visible-xs hidden-md hidden-sm hidden-lg" id="accordionPasajeVuelta"
        data-bind="foreach: paVueltaDisponibles">
        <div class="panel">
            <div class="panel-heading acor-phone-lista-pasajes-dispon-panel-header">
                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionPasajeVuelta"
                    data-bind="attr: { href:'#collapseVuelta' + $index() }"><strong><span data-bind="text: NombreProveedorTransportista">
                    </span></strong></a>
                <div class="pull-right">
                    <b class="precio"><span data-bind="text: '$ ' + Precio + ',00'"></span></b>
                    <!-- ko if: _.isEmpty($parent.vueltaSelected()) -->
                    <button class="btn btn-default btn-xs" data-bind="click: $parent.seleccionarPasaje.bind($data, false)">
                        <i class="fa fa-shopping-cart"></i>
                    </button>
                    <!-- /ko -->
                    <!-- ko ifnot: _.isEmpty($parent.vueltaSelected()) -->
                    <button class="btn btn-default btn-xs  btn-danger" data-bind="click: $parent.deseleccionarPasaje.bind($data, false)">
                         <i class="fa fa-times"></i>
                    </button>
                    <!-- /ko -->
                </div>
            </div>
            <div data-bind="attr: { id:'collapseVuelta' + $index() }" class="panel-collapse collapse"
                style="height: 0px;">
                <div class="panel-body row">
                    <div class="col-xs-12 col-sm-12 col-md-12 ">
                        <dl>
                            <dt>Fecha Salia : </dt>
                            <dd>
                                20/10/2013</dd>
                            <dt>Comodidad : </dt>
                            <dd>
                                <span data-bind="text: Calidad"></span>
                            </dd>
                            <dt>Fecha Llegada : </dt>
                            <dd>
                                21/10/2013</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>


    
    
    <div id="divTblPasajeVuelta" class="table-responsive hidden-xs visible-md visible-sm visible-lg">
        <table class="table table-striped tblTablePasajes">
            <thead>
                <tr>
                    <th>
                        Empresa
                    </th>
                    <th>
                        Salida
                    </th>
                    <th>
                        Llegada
                    </th>
                    <th>
                        Comodidad
                    </th>
                    <th>
                        Precio
                    </th>
                    <th>
                        Comprar
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: paVueltaDisponibles">
                <tr>
                    <td>
                        <span data-bind="text: NombreProveedorTransportista"></span>
                    </td>
                    <td>
                        <span data-bind="text: $parent.fechaIda"></span>
                    </td>
                    <td>
                        <span data-bind="text: $parent.fechaUrl"></span>
                    </td>
                    <td>
                        <span data-bind="text: Calidad"></span>
                    </td>
                    <td class="text-center" style="font-size: 15px; font-weight: bold;">
                        <span data-bind="text: $data.Precio"></span>
                    </td>
                    <td>
                        <!-- ko if: _.isEmpty($parent.vueltaSelected()) -->
                        <button class="btn btn-mini" data-bind="click: $parent.seleccionarPasaje.bind($data, false)">
                             <i class="fa fa-shopping-cart"></i>
                        </button>
                        <!-- /ko -->
                        <!-- ko ifnot: _.isEmpty($parent.vueltaSelected()) -->
                        <button class="btn btn-mini  btn-danger" data-bind="click: $parent.deseleccionarPasaje.bind($data, false)">
                            <i class="fa fa-times"></i>
                        </button>
                        <!-- /ko -->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>


</div>


    <!-- /ko -->


<div class="row BarraSubtotal">
    <div class="col-xs-4 col-sm-2 col-md-2 subtotal-titulo">Subtotal</div>
    <div class="col-xs-8 col-sm-10 col-md-10">
    
    <b class="precio pull-right"><span data-bind="text: '$ ' + precioFinal() + ',00'"></span></b>
    </div>
</div>


<div id="divBarraConfirmar" class="row">
    <a data-bind="page-href: '../butacasDisponibles'" class="btn btn-danger pull-right btn-lg">Comprar</a>
</div>
